import 'package:flutter/material.dart';
import 'package:flutter_provider/provider/weather_provoder.dart';
import 'package:provider/provider.dart';

// 知识点: Provider的使用
// 1、第一步:下载安装provider
// 2、第二步:引入provider
// 3、在需要使用provider的父widget中包裹片段 ChangeNotifierProvider
// 4、使用Provider.of<WeatherProvoder>(context) 或 Consumer来获取数据
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Provider的使用',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      // 使用ChangeNotifierProvider去管理WeatherProvoder
      home: ChangeNotifierProvider(create: (context) => WeatherProvoder(),
        child:  SafeArea(
        child: Scaffold(
            appBar: AppBar(
              title: const Text(
                "Provider的使用",
                style: TextStyle(
                  color: Colors.white,
                ),
                ),
              backgroundColor: Colors.deepPurple,
            ),
            body: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    myWidgetTitle(),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    myWidgetContent(),
                  ],
                )
              ],
          ),
          // widget前面使用const的原因是: 为了保证在不同平台上的兼容性
          floatingActionButton: const myFloatingActionButton(),
        ),
      )
      )
    );
  }
}


// 自定义组件myWidgetTitle
class myWidgetTitle extends StatefulWidget {
  const myWidgetTitle({super.key});
  @override
  State<myWidgetTitle> createState() => _myWidgetTitleState();
}

class _myWidgetTitleState extends State<myWidgetTitle> {
  @override
  Widget build(BuildContext context) {
    //第一种: 使用Provider.of<WeatherProvoder>(context)来获取数据
    WeatherProvoder weatherProvoder = Provider.of<WeatherProvoder>(context);
    return Text("myWidgetTitle: ${weatherProvoder.temperatureUnitVal}");
  }
}


// 自定义组件myWidgetTitle
class myWidgetContent extends StatelessWidget {
  const myWidgetContent({super.key});

  @override
  Widget build(BuildContext context) {
    // 第二种: 使用Consumer来获取数据
    return Consumer(builder: (context, WeatherProvoder weatherProvoder, child) {
      return Text("myWidgetContent: ${weatherProvoder.temperatureVal}");
    });
  }
}


// 自定义组件 myFloatingActionButton
class myFloatingActionButton extends StatelessWidget {
  const myFloatingActionButton({super.key});

  @override
  Widget build(BuildContext context) {
    // 获取provider数据
    WeatherProvoder weatherProvoder = Provider.of<WeatherProvoder>(context);
    return FloatingActionButton(
      onPressed: () {
        // 修改provider数据
        String type = weatherProvoder.temperatureUnitVal == "摄氏度" ? "华氏度" : "摄氏度";
        weatherProvoder.temperatureUnitVal = type;
        weatherProvoder.temperatureVal += 1;
      },
      tooltip: 'Increment',
      child: const Icon(Icons.edit),
    );
  }
}